<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button
        v-permission="['Admin.RBAC.Permission.Manage.Create']"
        class="filter-item"
        type="primary"
        icon="el-icon-plus"
        @click="showEditPermissionDialog()"
      >添加
      </el-button>
    </div>
    <el-table
      :key="tableKey"
      v-loading="tableLoading"
      :data="items"
      border
      row-key="code"
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column :label="'权限名称'" prop="name" min-width="250"></el-table-column>
      <el-table-column :label="'权限编码'" prop="code" min-width="350"></el-table-column>
      <el-table-column label="操作" width="230" align="center">
        <template slot-scope="{ row }">
          <el-button
            v-permission="['Admin.RBAC.Permission.Manage.Edit']"
            type="text"
            @click="showEditPermissionDialog(row.id)"
          >编辑
          </el-button>
          <el-divider v-permission="['Admin.RBAC.Permission.Manage.Edit']" direction="vertical" />
          <el-button
            v-permission="['Admin.RBAC.Permission.Manage.CreateChild']"
            type="text"
            @click="showEditPermissionDialog('', row.code)"
          >创建子级
          </el-button>
          <el-divider v-permission="['Admin.RBAC.Permission.Manage.CreateChild']" direction="vertical" />
          <el-button v-permission="['Admin.RBAC.Permission.Manage.Edit']" type="text" @click="deleteData(row.id)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <edit-permission-dialog ref="editPermissionDialog" @save="load()"></edit-permission-dialog>
  </div>
</template>

<script>
  import { getAllPermissions, deleteAuthorityInfoUsingDELETE } from "@/api/permisson";
  import EditPermissionDialog from "./components/EditPermissionDialog";

  export default {
    name: "PermissionList",
    components: {
      "edit-permission-dialog": EditPermissionDialog
    },
    data() {
      return {
        listOfOption: [],
        items: [],
        tableLoading: true,
        tableKey: 0
      };
    },
    created() {
      this.load();
    },
    methods: {
      resetSeach() {
        this.load();
      },
      load() {
        this.getList();
      },
      getList() {
        this.tableLoading = true;
        getAllPermissions().then(result => {
          this.listOfOption = result.fieldList;
          const filterResult = this.listOfOption.filter(m => m.parentCode === "ROOT_");
          this.items = filterResult.length ? filterResult : [this.listOfOption[0]];
          this.buildlistOfOption(this.items);
          this.tableLoading = false;
        });
      },
      buildlistOfOption(parentList) {
        parentList.forEach(m => {
          const nodes = this.listOfOption.filter(z => z.parentCode === m.code);
          m.children = [...nodes];
          this.buildlistOfOption(m.children);
        });
      },
      deleteData(id) {
        this.$confirm("删除后不可恢复， 是否继续?", "确定删除吗？", { type: "warning" })
          .then(() => {
            deleteAuthorityInfoUsingDELETE(id).then(() => {
              this.load();
              this.$message({ message: "删除成功", type: "success" });
            });
          })
          .catch(() => {
          });
      },
      showEditPermissionDialog(id, code) {
        this.$refs["editPermissionDialog"].show(id, code);
      }
    }
  };
</script>

